const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    // 导出地址
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js',
    // 通过这个地址访问文件
    publicPath:'./dist/'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // css-loader只负责将css文件进行加载
        // style-loader负责将样式添加到DOM中
        // 使用多个loader时, 是从右向左加载
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // limit的大小是 1kb * 1024
              // 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.
              // 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.再次打包，就会发现dist文件夹下多了一个图片文件
              limit: 8192,
              // 使用file-loader模块加载文件或者图片时，会在导出文件夹内重新生成这个文件，命名格式为随机生成的32位hash值
              // 这样并不方便我们日后的维护，我们可以通过name属性约束重新生成的文件名称和路径。 格式：
              // img/ ： 文件夹名称，表示在文件夹 img/ 下存放，根地址是上面output指定的path地址
              // [name] : 表示使用原文件名称
              // [hash:8] : 表示使用8位hash值
              // [ext] : 表示使用原文件后缀名
              name:'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      // 配置ES6语法转换成ES5语法
      {
        test: /\.js$/,
        // exclude: 排除
        // include: 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }

}
